<template>
  <custom-modal :visible="visible" :title="title" width="80%" v-bind="$attrs">
    <div class="info">
      <div>
        <span style="color: #232323; font-weight: bold">编号：{{ fields.reportNumber }}</span>
        <a-button class="info-action" @click="handleTips">提示</a-button>
        <a-button class="info-action" @click="handleUrge">催办</a-button>
        <a-button class="info-action" @click="handleManagerUrge">领导催办</a-button>
      </div>
      <div>报表名称：{{ fields.reportName }}</div>
      <div class="info-row">
        <div>报表频度：{{ fields.reportFrequency }}</div>
        <div>报送时间：{{ reportTime }}</div>
        <div>创建人：{{ creator }}</div>
        <div>状态</div>
      </div>
      <div class="info-row">
        <div>监管单位：{{ fields.regulationDept }}</div>
        <div>数据日期：{{ dataTime }}</div>
        <div>创建时间：{{ createTime }}</div>
        <div :style="{ color: fields.status.color }">{{ fields.status.name }}</div>
      </div>
      <a-divider style="margin: 5px 0"></a-divider>
    </div>

    <div class="steps">
      <div style="font-weight: bold">流程进度</div>
      <a-steps
        :current="currentStep"
        style="margin: 10px 0; overflow: auto"
        label-placement="vertical"
      >
        <template v-for="(step, index) in stepsData" :key="step.title">
          <a-step class="step">
            <template #description>
              <div
                class="step-title"
                :style="{ color: index > currentStep ? '#B8B8B8' : '#232323' }"
                >{{ step.title }}</div
              >
              <div class="step-approve-wrap">
                <div class="step-approve-row">
                  <div v-if="step.dept?.length"> {{ step.dept }} </div>
                  <div v-else style="margin-left: -10px"></div>
                  <div style="margin-left: 10px"> {{ step.staff }} </div>
                </div>
                <div style="white-space: nowrap" class="step-approve-row">
                  {{ step.finishTime }}
                </div>
              </div>
            </template>
          </a-step>
        </template>
      </a-steps>
      <a-divider></a-divider>
    </div>

    <div class="gather">
      <div class="gather-left">
        <div style="height: 20px; margin-top: 5px; font-weight: bold">报表汇总</div>
        <div>
          <preview-excel ref="previewExcelRef" style="height: 220px; margin: 10px 40px 5px 20px">
          </preview-excel>
          <div style="display: flex; align-items: center; margin: 0 0 10px 20px">
            <icon-font type="icon-excel" size="26"></icon-font>
            <a :href="dirTemplate" style="margin-left: 5px">下载</a>
          </div>
        </div>
      </div>
      <div class="gather-right">
        <custom-upload
          v-model:dir-id="dirId"
          action="/statement/dirmanagement/uploadTemplate"
        ></custom-upload>
      </div>
    </div>

    <template #footer>
      <div class="footer">
        <div class="footer-action">
          <a-button @click="handleGather">汇总</a-button>
          <a-button @click="handleSubmit">提交</a-button>
          <a-button @click="handleBack">退回</a-button>
        </div>
      </div>
    </template>
  </custom-modal>

  <custom-modal
    :visible="opinionVisible"
    title="情况说明或审批意见"
    default-footer
    :handle-ok="handleOk"
    :loading-ok="loadingOk"
    centered
  >
    <a-textarea v-model:value="opinion" placeholder="请输入审批意见" :rows="5" />
  </custom-modal>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue'
  import { Button, Input, Divider, Steps } from 'ant-design-vue'
  import CustomUpload from '@/components/CustomUpload.vue'
  import PreviewExcel from '@/components/PreviewExcel.vue'
  import CustomModal from '@/components/CustomModal.vue'
  import { getDirectoryDetail } from '@/api/directory'
  import { formatDate } from '@/utils/common'
  import { approve, sendMsg } from '@/api/flow'
  import { convertFlowNameCode2Chinese } from '@/views/report/directory/index.data'
  import { reportingSummer } from '@/api/report'
  import { useUserStore } from '@/store/modules/user'
  import { IconFont } from '@/components/iconfont'

  export default defineComponent({
    name: 'CheckModal',
    components: {
      IconFont,
      PreviewExcel,
      CustomUpload,
      CustomModal,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
      [Divider.name]: Divider,
      [Input.name]: Input,
      [Input.TextArea.name]: Input.TextArea,
      [Button.name]: Button
    },
    inheritAttrs: false,
    props: {
      title: {
        type: String,
        default: ''
      },
      fields: {
        type: Object,
        default: () => ({})
      }
    },
    setup(props) {
      const state = reactive({
        visible: true,
        isGather: false,
        isSubmit: false,
        isBack: false,
        isModify: false,
        opinionVisible: false,
        loadingOk: false,
        currentStep: 3,
        opinion: '',
        dirTemplate: '',
        dirStatements: Array<any>(),
        dirId: props.fields.dirId,
        reportTime: props.fields.reportTime,
        createTime: props.fields.createTime,
        dataTime: props.fields.dataTime,
        creator: props.fields.creator,
        stepsData: Array<Record<string, any>>()
      })
      const previewExcelRef = ref<any>(null)

      getDirectoryDetail(props.fields.dirId).then((res) => {
        console.log(res)
        state.reportTime = res.dirPushDate
        state.dirTemplate = res.dirTemplate
        state.dirStatements = res.dirStatements
        state.creator = res.dirCreatebyName
        state.createTime = formatDate(res.ctime)
        state.dataTime = formatDate(res.dirPeriodDate)
        previewExcelRef.value.previewExcel(res.dirTemplate)
        state.stepsData.push({
          title: '启动报表',
          dept: '',
          staff: res.dirCreatebyName,
          finishTime: formatDate(res.ctime)
        })
        for (const item of res.dirFlowMaps) {
          const obj: Record<string, any> = {}
          obj.title = convertFlowNameCode2Chinese(item.DIR_FLOW_NAME)
          obj.dept = item.DIR_ORG_NAME
          obj.staff = item.DIR_APPROVER_NAME
          obj.finishTime = formatDate(item.END_TIME)
          state.stepsData.push(obj)
        }
        state.currentStep = state.stepsData.length - 1
      })

      const showOpinion = () => {
        state.opinionVisible = false
        setTimeout(() => {
          state.opinionVisible = true
        }, 0)
      }

      const handleGather = () => {
        showOpinion()
        state.isGather = true
      }

      const handleSubmit = () => {
        showOpinion()
        state.isSubmit = true
      }

      const handleBack = () => {
        showOpinion()
        state.isBack = true
      }

      const handleModify = () => {
        showOpinion()
        state.isModify = true
      }

      const handleTips = () => {
        sendMsg({
          count: 1,
          dirId: props.fields.dirId
        })
      }

      const handleUrge = () => {
        sendMsg({
          count: 3,
          dirId: props.fields.dirId
        })
      }

      const handleManagerUrge = () => {
        sendMsg({
          count: 2,
          dirId: props.fields.dirId
        })
      }

      const closeModal = () => {
        state.loadingOk = false
        state.opinionVisible = false
        state.visible = false
      }

      const user = useUserStore()
      const handleOk = () => {
        state.loadingOk = true
        if (state.isGather) {
          reportingSummer(props.fields.dirId)
            .then(() => {
              state.isGather = false
              closeModal()
            })
            .catch(() => {
              state.isGather = false
              closeModal()
            })
        }
        if (state.isSubmit || state.isBack) {
          approve({
            dirFlowStatus: state.isSubmit ? 0 : 1,
            dirId: props.fields.dirId,
            dirStatementIds: state.dirStatements.map((item) => item.dirStatementId),
            dirApproverOpinion: state.opinion,
            dirApproverId: user.userInfo.user_id,
            dirApproverName: user.userInfo.name,
            dirOrgName: user.userInfo.dept_name
          })
            .then(() => {
              state.isSubmit = false
              closeModal()
            })
            .catch(() => {
              state.isSubmit = false
              closeModal()
            })
        }
      }

      return {
        ...toRefs(state),
        previewExcelRef,
        handleGather,
        handleOk,
        handleTips,
        handleModify,
        handleUrge,
        handleManagerUrge,
        handleSubmit,
        handleBack
      }
    }
  })
</script>

<style lang="scss" scoped>
  .info-action {
    color: #fff;
    background-color: #0077ff;
    margin: 5px;
    height: 26px;
    border-radius: 13px;
    border: 1px solid #0077ff;
  }

  .info {
    color: #707070;
  }

  .info-row {
    display: flex;
    & > div {
      flex: 1;
    }
  }

  .step {
    .step-title {
      text-align: left;
      font-weight: 400;
      color: #232323;
      margin-left: 30px;
      white-space: nowrap;
      &:last-child {
        margin-left: 45px;
      }
    }
    .step-approve-wrap {
      margin-bottom: 7px;
      margin-left: 30px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .step-approve-row {
      display: flex;
      font-size: 12px;
      color: #b8b8b8;
      align-items: center;
      white-space: nowrap;
    }
    &:last-child {
      margin-right: 40px;
    }
  }

  .gather {
    display: flex;

    .gather-left {
      width: 50%;
      border-right: 1px solid #d9d9d9;
    }

    .gather-right {
      width: 50%;
      padding: 30px 40px 40px;
      margin-top: 5px;
    }
  }

  .footer-action {
    text-align: center;
  }

  // 固定 form-item-label 的长度
  .footer ::v-deep(.ant-form-item-label) {
    & > label {
      display: flex;
      width: 80px;
      justify-content: flex-end;
    }
  }

  ::v-deep(.ant-divider-horizontal) {
    margin: 0;
  }
</style>
